<template>
  <div class="liunxTime">
    <template v-for="(item, index) in list" :key="item.unix">
      <span
        class="liunxTime_box"
        :class="{ active: index == clickedVal ? true : false }"
        @click="changeIndex(index, item.unix)"
      >
        <div class="liunxTime_box_top">{{ item.week }}</div>
        <div class="liunxTime_box_time">{{ item.time }}</div>
      </span>
    </template>
  </div>
</template>

<script>
import subString from "../../utils/subString";
import getLinuxTime from "../../utils/linuxTime";
export default {
  name: "liunxTime",
  props: {
    value: {
      required: true,
      type: Number,
    },
  },
  data() {
    return {
      newValue: 0,
      clickedVal: 0,
      list: [],
    };
  },
  methods: {
    changeIndex(index, unix) {
      this.clickedVal = index;
      this.newValue = unix;
    },
  },
  created() {
    this.newValue = this.value;
    const list = getLinuxTime();
    list.forEach((item) => {
      item.time = subString(item.time, "/");
    });
    this.list = list;
  },
  watch: {
    newValue() {
      this.$emit("valueChange", this.newValue);
    },
  },
};
</script>

<style lang="scss" scope>
.liunxTime .active {
  font-weight: 550 !important;
  color: black;
  &::after {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #9bbbf1;
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
  }
}
.liunxTime {
  height: 100%;
  background-color: #ffffff;
  display: inline-block;

  width: auto;
  &_box {
    width: 56px;
    display: inline-block;
    height: 100%;
    text-align: center;
    overflow: hidden;
    position: relative;
    color: #b4b4b4;

    &_top {
      margin: 10px 0;
      font-size: 15px;
    }
    &_time {
      font-size: 20px;
    }
  }
}
</style>
